<!--
 * @Author: your name
 * @Date: 2021-12-29 21:52:08
 * @LastEditTime: 2022-01-06 11:57:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am-ui\src\pages\am\order\List.vue
-->
<template>
  <div class="orderList">
    <!-- 检索按钮区域 -->
    <div class="btns">
      <el-form
        :inline="true"
        :model="params"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-select
            v-model="params.status"
            clearable
            placeholder="请选择工单状态"
          >
            <el-option label="待接单" value="待接单"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearchHandler">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 标签页 -->
    <el-tabs v-model="params.type" @tab-click="tabHandleClick">
      <el-tab-pane label="安装" name="安装"></el-tab-pane>
      <el-tab-pane label="维修" name="维修"></el-tab-pane>
      <el-tab-pane label="拆机" name="拆机"></el-tab-pane>
    </el-tabs>
    <!-- 表格区域 -->
    <div class="table">
      <el-table size="small" :data="resData.list" style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="60px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="engineer_name"
          label="工程名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="device_name"
          label="设备名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="报修时间"
          align="center"
          width="130px"
        >
          <template v-slot="{ row }">
            <span>{{ row.create_time | fmtTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="报修原因" align="center">
          <template v-slot="{ row }">
            <span v-if="row.bill_why == null">暂无</span>
            <span v-else>{{ row.bill_why }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="工单类型"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="80px">
          <template v-slot="{ row }">
            <el-tag size="mini" v-if="row.status == '待接单'" type="danger">{{
              row.status
            }}</el-tag>
            <el-tag
              size="mini"
              v-else-if="row.status == '进行中'"
              type="warning"
              >{{ row.status }}</el-tag
            >
            <el-tag size="mini" v-else type="success">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="工人姓名" align="center" width="100px">
          <template v-slot="{ row }">
            <el-tag size="mini" v-if="row.account_name == null" type="info"
              >暂未接单</el-tag
            >
            <el-tag size="mini" v-else type="success">{{
              row.account_name
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="finish_time"
          label="完成时间"
          align="center"
          width="130px"
        >
          <template v-slot="{ row }">
            <div v-if="row.finish_time == null">暂无</div>
            <div v-else>{{ row.finish_time | fmtTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template v-slot="{ row }">
            <el-button @click="toDetailHandler(row)" type="text" size="small"
              >详情</el-button
            >
            <el-button
              v-if="row.status == '待接单'"
              @click="toCancelHandler(row.id)"
              type="text"
              size="small"
              style="red"
              >取消</el-button
            >
            <el-button v-else type="text" size="small" disabled>取消</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件区域 -->
    <el-pagination
      background
      style="margin-top: 1em"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parseInt(resData.page)"
      layout="total,prev, pager, next, jumper"
      :total="parseInt(resData.total)"
    >
    </el-pagination>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      resData: {},
      params: {
        page: 1,
        pageSize: 10,
        type: "安装",
      },
    };
  },
  computed: {},
  methods: {
    findAllOrders() {
      get("/workorder/pageQuery", this.params).then((res) => {
        this.resData = res.data;
      });
    },
    // 标签页点击函数
    tabHandleClick() {
      this.findAllOrders();
    },
    //工单详情页点击
    toDetailHandler(row) {
      this.$router.push({
        path: "Details",
        query: row,
      });
    },
    //取消按钮点击事件
    toCancelHandler(id) {
      this.$confirm("此操作将取消报修的工单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 用户点击确认按钮，然后再做订单
        get("/workorder/cancelOrder", { id }).then((res) => {
          // 数据重载
          this.findAllOrders();
          // 提示删除成功
          this.$message.success("取消成功");
        });
      });
    },
    // 搜索按钮点击事件
    toSearchHandler() {
      this.findAllOrders();
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findAllOrders();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.findAllOrders();
    },
  },
  created() {
    this.findAllOrders();
  },
};
</script>